<template>
    <div class="configurator">
        <el-tabs v-model="activeTab">
            <!-- CPU选择 -->
            <el-tab-pane label="CPU" name="cpu">
                <el-table :data="cpuList" @selection-change="handleCpuSelection">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="型号" prop="model_name" />
                    <el-table-column label="核心/线程" width="120">
                        <template #default="{ row }">
                            {{ row.core_count }}核/{{ row.thread_count }}线程
                        </template>
                    </el-table-column>
                    <el-table-column label="频率" width="120">
                        <template #default="{ row }">
                            {{ row.base_freq }}-{{ row.max_boost_freq }}
                        </template>
                    </el-table-column>
                    <el-table-column label="缓存" prop="cache_size" width="100" />
                    <el-table-column label="价格" prop="price1" width="100">
                        <template #default="{ row }">¥{{ row.price1 }}</template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <!-- 内存选择 -->
            <el-tab-pane label="内存" name="memory">
                <el-table :data="memoryList" @selection-change="handleMemorySelection">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="容量" prop="capacity" />
                    <el-table-column label="型号" prop="model_name" />
                    <el-table-column label="类别" prop="category" />
                    <el-table-column label="价格" prop="price1" width="100">
                        <template #default="{ row }">¥{{ row.price1 }}</template>
                    </el-table-column>
                    <el-table-column label="数量" width="120">
                        <template #default="{ row }">
                            <el-input-number v-model="row.quantity" :min="1" :max="8" />
                        </template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <!-- 显卡选择 -->
            <el-tab-pane label="显卡" name="gpu">
                <el-table :data="gpuList" @selection-change="handleGpuSelection">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="型号" prop="model_name" />
                    <el-table-column label="种类" prop="category" />
                    <el-table-column label="详细参数" prop="details" />
                    <el-table-column label="价格" prop="price1" width="100">
                        <template #default="{ row }">¥{{ row.price1 }}</template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>

            <!-- 硬盘选择 -->
            <el-tab-pane label="存储" name="storage">
                <el-tabs type="border-card">
                    <el-tab-pane label="SSD">
                        <el-table :data="ssdList" @selection-change="handleSsdSelection">
                            <el-table-column type="selection" width="55" />
                            <el-table-column label="品牌" prop="brand" />
                            <el-table-column label="容量" prop="capacity" />
                            <el-table-column label="接口" prop="interface_type" />
                            <el-table-column label="价格" prop="price1" width="100">
                                <template #default="{ row }">¥{{ row.price1 }}</template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                    <el-tab-pane label="HDD">
                        <el-table :data="hddList" @selection-change="handleHddSelection">
                            <el-table-column type="selection" width="55" />
                            <el-table-column label="品牌" prop="brand" />
                            <el-table-column label="容量" prop="capacity" />
                            <el-table-column label="接口" prop="interface_protocol" />
                            <el-table-column label="价格" prop="price1" width="100">
                                <template #default="{ row }">¥{{ row.price1 }}</template>
                            </el-table-column>
                        </el-table>
                    </el-tab-pane>
                </el-tabs>
            </el-tab-pane>

            <!-- 显示器选择 -->
            <el-tab-pane label="显示器" name="monitor">
                <el-table :data="monitorList" @selection-change="handleMonitorSelection">
                    <el-table-column type="selection" width="55" />
                    <el-table-column label="型号" prop="model_name" />
                    <el-table-column label="尺寸" prop="size" />
                    <el-table-column label="分辨率" prop="resolution" />
                    <el-table-column label="面板" prop="panel_type" />
                    <el-table-column label="价格" prop="price1" width="100">
                        <template #default="{ row }">¥{{ row.price1 }}</template>
                    </el-table-column>
                </el-table>
            </el-tab-pane>
        </el-tabs>

        <div class="action-buttons">
            <el-button type="primary" @click="handleNext">
                下一步：填写客户信息
            </el-button>
        </div>

        <!-- 已选配件预览 -->
        <el-card class="selected-preview" v-if="selectedComponents.length > 0">
            <template #header>
                <div class="card-header">已选配件</div>
            </template>
            <el-table :data="selectedComponents" size="small">
                <el-table-column label="类型" prop="type" />
                <el-table-column label="型号" prop="model" />
                <el-table-column label="规格" prop="spec" />
                <el-table-column label="数量" prop="quantity" />
                <el-table-column label="单价" prop="price">
                    <template #default="{ row }">¥{{ row.price }}</template>
                </el-table-column>
                <el-table-column label="总价">
                    <template #default="{ row }">¥{{ row.price * row.quantity }}</template>
                </el-table-column>
            </el-table>
            <div class="total-price">
                总计: ¥{{ totalPrice }}
            </div>
        </el-card>
    </div>
</template>

<script setup>
import { ref, computed, onMounted } from 'vue'
import { ElMessage } from 'element-plus'

const activeTab = ref('cpu')
const selectedComponents = ref([])

// 模拟数据加载
const cpuList = ref([])
const memoryList = ref([])
const gpuList = ref([])
const ssdList = ref([])
const hddList = ref([])
const monitorList = ref([])

onMounted(async () => {
    // 这里应该调用API获取数据
    cpuList.value = await fetchCpuModels()
    memoryList.value = await fetchMemoryModels()
    gpuList.value = await fetchGpuModels()
    ssdList.value = await fetchSsdModels()
    hddList.value = await fetchHddModels()
    monitorList.value = await fetchMonitorModels()
})

const totalPrice = computed(() => {
    return selectedComponents.value.reduce((total, comp) => {
        return total + (comp.price * comp.quantity)
    }, 0)
})

const handleCpuSelection = (selection) => {
    updateSelectedComponents(selection, 'CPU')
}

const handleMemorySelection = (selection) => {
    updateSelectedComponents(selection, '内存')
}

const handleGpuSelection = (selection) => {
    updateSelectedComponents(selection, '显卡')
}

const handleSsdSelection = (selection) => {
    updateSelectedComponents(selection, 'SSD')
}

const handleHddSelection = (selection) => {
    updateSelectedComponents(selection, 'HDD')
}

const handleMonitorSelection = (selection) => {
    updateSelectedComponents(selection, '显示器')
}

const updateSelectedComponents = (selection, type) => {
    // 移除旧的选择
    selectedComponents.value = selectedComponents.value.filter(
        comp => comp.type !== type
    )

    // 添加新的选择
    selection.forEach(item => {
        selectedComponents.value.push({
            type,
            model: item.model_name || item.brand,
            spec: item.details || item.capacity,
            price: item.price1,
            quantity: item.quantity || 1
        })
    })
}

const handleNext = () => {
    if (selectedComponents.value.length === 0) {
        ElMessage.warning('请至少选择一个配件')
        return
    }

    emit('next', {
        components: selectedComponents.value,
        totalPrice: totalPrice.value
    })
}

const emit = defineEmits(['next'])
</script>